<script setup lang="ts">
import axios from "axios";
import {computed, onMounted, reactive, ref} from "vue";
import PileUpView from "@/components/PileUp.vue";
import LineView from "@/components/PileUp.vue";

const bar_data = reactive([]);
const bar_title = ref('德里一年不同月份的污染物含量变化')
const bar_type = ref('bar')

const line_data = reactive([]);
const line_title = ref('几个印度城市的污染物含量');
const line_type = ref('line');
const dataZoom = ref({
  show: true,
  realtime: true,
  start: 60,
  end: 100,
  bottom: '10'
});
const grid = ref({
  left: '6',
  right: '6',
  bottom: '60',
  containLabel: true
});

function getData() {
  axios.get("/api/IndiaCity/getIndiaCityData").then((response) => {
    bar_data.value = response.data;
  });
  axios.get("/api/IndiaCity/pileUp").then((response) => {
    line_data.value = response.data;
  });
}

const bar_option = computed(() => {
  return bar_data.value;
});
const line_option = computed(() => {
  return line_data.value;
});
onMounted(() => {
  getData();
});
</script>

<template>
  <div class="chart-data-view" style="height: 100%;">
    <div class="chart-dv-full-screen-container" style="height: 100%;">
      <div class="chart-row" style="height: 100%;">
        <div class="chart-col" style="height: 50%;">
          <line-view  :chart_option="bar_option" :title="bar_title" :type="line_type"  :data-zoom="dataZoom":grid="grid" v-if="bar_data.value"/>
        </div>
        <div class="chart-col" style="height: 50%">
          <pile-up-view :chart_option="line_option" :title="line_title" :type="bar_type" :grid="grid" v-if="line_data.value"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/scss_variable.scss";
</style>